<template>
  {{ disabled }}
  <a-cascader v-model:value="value" :options="options" expand-trigger="hover" placeholder="" @change="onChange">
    <a-input :style="inputstyle" :disabled="isDisabled" :value="test"></a-input>
  </a-cascader>
</template>
<script>
import { defineComponent, ref, toRefs, watch } from 'vue'
export default defineComponent({
  props: {
    appTypeList: {
      type: Object,
      default: () => {
        return {}
      },
    },
    width: { type: String, default: '120px' },
    appTypeText: { type: String, default: '' },
    isDisabled: { type: Boolean, default: false },
  },
  emits: ['change'],
  setup(props, ctx) {
    const test = ref('')
    const { appTypeList: options, width, appTypeText } = toRefs(props)
    test.value = appTypeText.value
    const value = ref([])
    const changeValue = () => {
      value.value = []
    }
    const onChange = (_value, selectedOptions) => {
      let obj = selectedOptions[selectedOptions.length - 1]
      test.value = obj.label
      ctx.emit('change', obj)
    }
    const inputstyle = ref({ width: width.value, 'margin-right': '10px' })
    return {
      value,
      changeValue,
      options,
      test,
      onChange,
      inputstyle,
    }
  },
})
</script>
<style scoped></style>
